<template>
	<!-- 绑定手机号 -->
	<view class="bindTel">
		<view class="form re">
			<view class="username">
				<view class="get-code" :style="{background: getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNumber" placeholder-style="color: #333333;"/>
				<text class="now_bind" v-if="userinfo.mobile && userinfo.mobile !== ''">已绑定</text>
			</view>
			<view class="code">
				<input placeholder="请输入验证码"  type="number" maxlength="6" v-model="code" placeholder-style="color: #333333;"/>
			</view>
			<view class="btn" @tap="doReg" :style="{background: newColor.color}">确认提交</view>
		</view>
		
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import{ getUserInfo, setTel } from '../../../static/utils/ahth.js'
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeisWaiting:false,
				getCodeBtnColor:'',
				userinfo:{}
			}
		},
		onLoad() {
			this.getUserData()
		},
		created() {
			this.getCodeBtnColor = this.newColor.color
		},
		methods: {
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#aaa"
				//示例用定时器模拟请求效果
				this.request('common/sendMobileCode',{
					mobile: this.phoneNumber
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						uni.showToast({title: '验证码已发送',icon:"none"});
						this.setTimer();
					}
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#F23A3A";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReg(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(this.code.length < 6){ 
					uni.showToast({title: '验证码不正确',icon:"none"});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
				this.editTel()
			},
			editTel(){
				this.request('user/bindMobile',{
					mobile: this.phoneNumber,
					code: this.code
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						uni.showToast({
							title: '绑定成功'
						})
						setTimeout(()=>{
							this.$Router.back(1)
						}, 1500)
					}
					if(res.code == 400){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getUserData() {
				//获取个人信息
				this.request('user/getUserInfo', {}).then(res => {
					console.log(res);
					if(res.code == 200){
						this.userinfo = res.data;	
						let phone = res.data.mobile || ''
						if( phone!== ''){
							this.phoneNumber =setTel(phone)
						}
					}else if(res.code == 400){
						this.userinfo = {}
						removeToken()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bindTel{
		overflow: hidden;
		background-color: #FFFFFF;
		padding-bottom: 50upx;
	}
	.form{
		overflow: hidden;
		margin-top: 40upx;
		.username,.code{
			height:80upx;
			padding:20upx 30upx;
			border-bottom: 1upx solid #F2F2F2;
			box-sizing: content-box;
			position: relative;
			input{
				float: left;
				height: 80upx;
				line-height: 80upx;
				font-size:28upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color:rgba(51,51,51,1);
				width: 300upx;
			}
			.get-code{
				width:170upx;
				height:56upx;
				background:rgba(242,58,58,1);
				border-radius:30upx;
				float: right;
				font-size:24upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color: #FFFFFF;
				text-align: center;
				line-height: 56upx;
				margin-top: 15upx;
			}
		}
	}
	.btn{
		width:500upx;
		height:76upx;
		background:rgba(242,58,58,1);
		border-radius:38upx;
		font-size:32upx;
		font-family:Droid Sans Fallback;
		font-weight:400;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 76upx;
		margin: 0 auto;
		margin-top: 150upx;
	}
	.now_bind{
		height: 40upx;
		font-size: 22upx;
		background-color: #F2F2F2;
		color: #999;
		position: absolute;
		border-radius: 15upx;
		top: 50%;
		transform: translateY(-50%);
		padding: 5upx 20upx;
		line-height: 40upx;
		right: 220upx;
	}
</style>
